<template>
  <div class="hm-comment-parent">
    <hm-comment-parent :value="value.parent" v-if="value.parent" @sonIndex="sonIndex"></hm-comment-parent>
    <div class="parent-comment" :style="isBdTop" v-if="Object.keys(value).length">
      <div class="parent-info">
        <div class="index">{{ index }}楼</div>
        <div class="parent-nickname">{{ value.user.nickname }}</div>
        <div class="parent-time">{{ value.create_date | fromNow }}</div>
        <div class="reply" @click="reply(value.id, value.user.nickname)">回复</div>
      </div>
      <div class="parent-comment-content">{{ value.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hm-comment-parent',

  props: {
    value: {
      type: Object,
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      index: 1
    }
  },

  created () {
    if (!this.value.parent) {
      this.parentIndex()
    }
  },

  methods: {
    parentIndex () {
      // console.log(this.index)
      this.$emit('sonIndex', this.index)
    },
    sonIndex (index) {
      this.index = index + 1
      this.parentIndex()
    },
    reply (parentId, nickname) {
      this.$bus.$emit('reply-parent', [parentId, nickname])
    }
  },

  computed: {
    isBdTop () {
      return this.index === 1 ? 'border-top: 1px solid #d7d7d7;' : ''
    }
  }
}
</script>

<style lang="scss">
.parent-comment {
  padding: 15px 20px 20px;
  border: 1px solid #d7d7d7;
  border-top: 0;
  .parent-info {
    display: flex;
    height: 20px;
    align-items: center;
    .index {
      color: #333;
      margin-right: 10px;
    }
    .parent-nickname {
      font-size: 14px;
      color: #333;
      margin-right: 10px;
    }
    .parent-time {
      flex: 1;
    }
  }
  .parent-comment-content {
    font-size: 14px;
    color: #333;
    margin-top: 15px;
  }
}
</style>
